<!-- 设备知识库 -->
<template>
  <div class="app-container">
    <div class="container">
      <div class="search-and-button">
        <el-button type="primary" icon="el-icon-plus" @click="showDialog(null)"
          >新建</el-button
        >
        <el-button
          type
          icon="el-icon-refresh-left"
          @click="$router.push('/reload')"
          >刷新</el-button
        >
        <el-button type icon="el-icon-more">更多</el-button>
        <el-button
          type="primary"
          plain
          :icon="!show ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
          @click="show = !show"
          >查询条件</el-button
        >
      </div>
      <transition name="el-zoom-in-top">
        <div v-show="show" class="more-search">
          <el-form :model="search" label-width="80px">
            <el-row>
              <el-col :xs="24" :xl="8" :md="8">
                <el-form-item label="解决日期" prop="time">
                  <el-date-picker
                    v-model="search.time"
                    style="width: 100%"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期时间"
                    @change="getTableInfo()"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :xl="8" :md="8">
                <el-form-item label="类别" prop="keyword">
                  <el-input
                    v-model="search.keyword"
                    clearable
                    placeholder="请输入名称或编码回车搜索"
                    @keyup.enter.native="getTableInfo()"
                    @clear="getTableInfo()"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :xl="8" :md="8">
                <el-form-item label="停机类型" prop="type">
                  <el-select
                    v-model="search.type"
                    @change="getTableInfo()"
                    style="width: 100%"
                  >
                    <el-option label="全部" value></el-option>
                    <el-option label="维修" :value="1"></el-option>
                    <el-option label="保养" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </transition>
      <el-row class="table">
        <el-table
          ref="tableData"
          :data="tableData"
          stripe
          border
          row-key="id"
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: false }"
        >
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="索引"
            width="60px"
          />
          <el-table-column
            v-for="item in fieldList"
            :key="item.id"
            :align="item.align || 'left'"
            :prop="item.code.split(':')[1]"
            :label="item.val"
            :min-width="item.width + 'px'"
            show-overflow-tooltip
          />
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="100px"
          >
            <template #default="{ row }">
              <el-button-group>
                <el-button type="text" size="medium" @click="showDialog(row)">
                  <i class="iconfont icon-search"></i>
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <div class="table-btn-box">
          <el-button
            @click="
              () => {
                tableData.forEach((row) => {
                  $refs['tableData'].toggleRowSelection(row, true);
                  if (row.children && row.children.length > 0) {
                    row.children.forEach((child) => {
                      $refs['tableData'].toggleRowSelection(child, true);
                    });
                  }
                });
              }
            "
            >选择全部</el-button
          >
          <el-button
            @click="
              () => {
                tableData.forEach((row) => {
                  $refs['tableData'].toggleRowSelection(row);
                  if (row.children && row.children.length > 0) {
                    row.children.forEach((child) => {
                      $refs['tableData'].toggleRowSelection(child);
                    });
                  }
                });
              }
            "
            >反向选择</el-button
          >
          <el-button>
            更多菜单
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
        </div>
        <pagination
          ref="Pagination"
          :total="total"
          :current.sync="search.current"
          :size.sync="search.size"
          @pagination="getTableInfo"
        />
      </el-row>
      <!-- 新增编辑 -->
      <modify
        ref="addAndModify"
        :user-all-list="userAllList"
        @getTableInfo="getTableInfo"
      />
    </div>
  </div>
</template>
<script>
import modify from "./components";
import Pagination from "@/components/Pagination";
import { getUserListApi } from "@/api/public";
export default {
  components: { modify, Pagination },
  data() {
    return {
      tableData: [],
      show: false,
      total: 0,
      search: {
        current: 1,
        size: 20,
        objNo: "",
        keyword: "",
        time: [],
        treeStr: "-1",
        deptId: "",
        status: "",
        beginDate: "",
        endDate: "",
        type: "",
      },
      userAllList: [],
    };
  },
  computed: {},
  async mounted() {
    await this.getTableInfo();
    await this.getUserAll();
  },
  methods: {
    /* 获取所有人员 */
    async getUserAll() {
      const res = await getUserListApi();
      if (res?.data.code === 200) {
        this.userAllList = res.data.data;
      }
    },
    timeDivide() {
      const { time } = this.search;
      if (time && time.length) {
        this.search.beginDate = time[0];
        this.search.endDate = time[1];
      } else {
        this.search.beginDate = "";
        this.search.endDate = "";
      }
      const search = {
        ...this.search,
      };
      delete search.time;
      return search;
    },
    /* 获取所有分页数据 */
    async getTableInfo(page = 1) {
      let search = this.timeDivide();
      search.current = page;
      this.loading = true;
      const res = await this.$axios.post("/equip/knowledge/list", search);
      if (res?.data.code === 200) {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        setTimeout(() => {
          this.loading = false;
        }, 100);
      } else {
        this.loading = false;
      }
    },
    /**
     * @description: 新增编辑
     * @return {*}
     */
    async showDialog(row) {
      this.$refs["addAndModify"].showDialog(row);
    },
  },
};
</script>
<style lang="scss" scoped>
.search-and-button {
  line-height: 30px;
  width: 100%;
  display: flex;
  justify-content: right;
}
.table {
  margin-top: 20px;
}
</style>
